<template>
  <div class="count-container">
    <a-card class="card">
      <div class="show-count">
        <CountAnimation
          ref="countRef"
          :start-value="formState.start"
          :end-value="formState.end"
          :duration="formState.duration"
        />
      </div>
      <div class="show-form">
        <a-form
          ref="formRef"
          layout="inline"
          :model="formState"
          name="basic"
          autocomplete="off"
        >
          <a-form-item label="起始值" name="start">
            <a-input-number
              style="width: 100%"
              v-model:value="formState.start"
              min="0"
              max="99999999"
            ></a-input-number>
          </a-form-item>
          <a-form-item label="最终值" name="end">
            <a-input-number
              style="width: 100%"
              v-model:value="formState.end"
              :min="formState.start"
              max="99999999"
            ></a-input-number>
          </a-form-item>
          <a-form-item label="持续时间" name="duration">
            <a-input-number
              style="width: 100%"
              v-model:value="formState.duration"
              min="1"
              addon-after="ms"
            ></a-input-number>
          </a-form-item>
          <a-form-item>
            <a-button @click="onRun" type="primary">开始</a-button>
          </a-form-item>
        </a-form>
      </div>
      <a-descriptions title="配置项" bordered :column="1">
        <a-descriptions-item label="start">起始值</a-descriptions-item>
        <a-descriptions-item label="end">最终值</a-descriptions-item>
        <a-descriptions-item label="duration"
          >持续时间（单位：ms）</a-descriptions-item
        >
      </a-descriptions>
    </a-card>
  </div>
</template>
<script lang="ts" setup>
import CountAnimation from "@/components/countAnimation/index.vue";
import { FormInstance } from "ant-design-vue";
import { ref } from "vue";

const countRef = ref();
const formRef = ref<FormInstance>();
const formState = ref<{
  start: number;
  end: number;
  duration: number;
}>({
  start: 0,
  end: 1000,
  duration: 2000,
});
const onRun = () => {
  countRef.value.runAnimation();
};
</script>
<style lang="less" rel="stylesheet/less" scoped>
.count-container {
  margin: 20px;
  height: calc(100% - 80px);

  .card {
    height: 100%;
    overflow: scroll;
    box-shadow: 0px 0px 12px rgb(0 0 0 / 12%);
    border-radius: 4px;
    margin: 8px 5px;
  }
  .show-count {
    text-align: center;
    color: #1890ff;
    font-size: 4em;
  }
  .show-form {
    margin-bottom: 40px;
  }
  :deep(.ant-form-item) {
    margin: 6px;
  }
}
</style>
